document.addEventListener('DOMContentLoaded', function() {
    var searchInput = document.querySelector('.search-input');
    var searchButton = document.querySelector('.search-button');
    var currentPage = 0;
    var pageSize = 5;
    var total = 0;

    // 搜索功能
    function search() {
        var query = searchInput.value; // 获取搜索框中的值
        if (query) { // 如果查询内容不为空
            var searchBox = document.querySelector('.search-box');
            var logoLink = document.querySelector('.logo-link');
            searchBox.classList.add('top-box'); // 给搜索栏添加样式类
            searchBox.insertBefore(logoLink, searchBox.firstChild); // 将logo移动到搜索栏的顶部
            // 重置当前页码为0
            currentPage = 0;
            // 发起请求获取电影列表
            fetchMovies(query, currentPage);
        }
    }

    // 绑定搜索按钮的点击事件
    searchButton.addEventListener('click', search);

    // 绑定搜索框的键盘按下事件，当按下Enter键时触发搜索
    searchInput.addEventListener('keypress', function (event) {
        if (event.key === 'Enter') {
            search();
        }
    });

    function fetchMovies(query, page) {
        // 创建一个新的 XMLHttpRequest 对象用于发起请求
        const xhr = new XMLHttpRequest();

        // 打开一个 POST 请求到 '/search/movieList' URL，并设置为异步
        xhr.open('POST', '/search/movieList', true);

        // 设置请求头 Content-Type 为 'application/x-www-form-urlencoded'
        // 这意味着将要发送的数据体是 URL 编码的键值对
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 设置 onload 事件监听器，当请求完成并成功加载时触发
        xhr.onload = function () {
            // 检查响应状态码是否为 200，表示请求成功
            if (xhr.status === 200) {
                // 解析响应文本为 JSON 对象
                var response = JSON.parse(xhr.responseText);

                // 从响应中提取电影列表和总数
                var movieList = response.movies;
                total = response.total;
                // 在控制台打印电影列表、总数和当前页码
                console.log(movieList);
                console.log(total);
                console.log(currentPage);
                // 获取页面上的结果容器元素
                var resultsList = document.querySelector('.results-container ul');
                // 清空结果列表的内容
                resultsList.innerHTML = '';

                // 检查电影列表是否为空
                if (movieList.length === 0) {
                    // 如果为空，隐藏结果容器和分页，显示“无结果”信息
                    document.querySelector('.results-container').classList.add('hidden');
                    document.querySelector('.no-result').classList.remove('hidden');
                } else {
                    // 如果不为空，显示结果容器和分页，隐藏“无结果”信息
                    document.querySelector('.no-result').classList.add('hidden');
                    document.querySelector('.results-container').classList.remove('hidden');

                    // 遍历电影列表
                    movieList.forEach(function (movie) {
                        // 为每部电影创建一个列表项
                        var li = document.createElement('li');
                        li.classList.add('movie-item');

                        // 创建图片元素
                        var img = document.createElement('img');

                        // 封面图片存放在/img/movie_img/目录下，并且文件名是movieId.jpg
                        // 这里的movieId是从movie对象中获取的
                        img.src = '/img/movie_img/' + movie.movieId + '.jpg'; // 使用movieId作为文件名的一部分

                        // 设置图片的alt属性为电影名称
                        img.alt = movie.movieName;

                        // 创建并设置电影名称元素
                        var name = document.createElement('div');
                        name.classList.add('name');
                        name.textContent = movie.movieName;

                        // 为列表项添加点击事件监听器，点击后跳转到播放页面
                        li.addEventListener('click', function () {
                            window.location.href = '/player?movieId=' + movie.movieId;
                        });

                        // 将图片和名称添加到列表项中
                        li.appendChild(img);
                        li.appendChild(name);

                        // 将列表项添加到结果列表中
                        resultsList.appendChild(li);
                    });

                    // 更新当前页码和总页数的显示
                    // document.querySelector('.current-page').textContent = page + 1; // 注意：page 是从 0 开始的，所以显示时要加 1
                    // document.querySelector('.total-pages').textContent = total;
                }
            } else {
                // 如果请求失败，打印错误信息
                console.error('Error:', xhr.statusText);
            }
        };

        // 发送请求，并带上查询参数、页码和每页大小
        xhr.send('query=' + encodeURIComponent(query) + '&page=' + page + '&size=' + pageSize);
    }
});
